<template>
	<view>
		<!-- 
		size:default是默认view width;mini是小图标
		type:default为白色；primary为各平台的按钮自定义颜色；warn为红色；也可以通过style修改按钮颜色
		 -->
		<button size="default" type="default" class="initbutton" hover-class="is-hover">default按钮</button>
		<button size="mini" type="primary" hover-class="is-hover">mini按钮</button>
		<button size="mini" type="default" disabled="true">disable按钮</button>
		<navigator url="/pages/index/index"><button type="primary" plain="true">plain跳首页按钮</button></navigator>

	</view>
	<view class="button-sp-area">
		<!-- plain 表示按钮镂空，背景色透明 -->
		<button type="default" plain="true" class="button-sp-area-center">50%镂空居中按钮</button>
		<button type="default" disabled="true" plain="true" :loading="ifload">按钮</button>
	</view>
</template>

<script setup>
	const ifload = true; // 是否loading true/false
</script>

<style>
.initbutton {
	background-color: antiquewhite;
}
.is-hover {
	color: rgba(255, 255, 255, 0.6);
	/* 此处的 !important 还必须得加上，因为hover-class的优先级很低，容易被别的样式给干掉；比如 type="primary" 或者 class="initbutton" 都能将其完全碾压 */
	background-color: #abcdef !important;
	border-color: #abcdef;
}
.button-sp-area {
	/* 保证居中，而且只占据60%的空间 */
	display: block;
	margin: 0, auto; /* 左右自动调整 */
	width: 75%;
}
.button-sp-area-center{
	margin-left: 25%;
}
</style>
